<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css" >
    <title>Document</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="main">
        <header>
            <section>
                <form  id="form">
                    <label for="title">ToDoList</label>
                    <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off">
                </form>
            </section>
        </header>
        <section>
            <h2>正在进行 <span id="todocount">3</span></h2>
            <ol id="todolist" class="demo-box">
                <!-- <li>
                    <input type="checkbox" >
                    <p>跑步</p>
                    <a href="">-</a>
                </li>
                <li>
                    <input type="checkbox">
                    <p>看书</p>
                    <a href="">-</a>
                </li>
                <li>
                    <input type="checkbox" >
                    <p>打豆豆</p>
                    <a href="">-</a>
                </li> -->
                <li v-for="list in todolist">
                    <input type="checkbox" v-bind:checked="list.isChecked">
                    <p>{{list.title}}</p>
                    <a href="">-</a>
                </li>
            </ol>
            <h2>已经完成 <span id="donecount">2</span></h2>
            <ul id="donelist">
                <!-- <li>
                    <input type="checkbox"  checked="checked">
                    <p>睡觉</p>
                    <a href="">-</a>
                </li>
                <li>
                    <input type="checkbox" checked="checked">
                    <p>吃饭</p>
                    <a href="">-</a>
                </li> -->
                <li v-for="list in donelist">
                    <input type="checkbox" v-bind:checked="list.isChecked">
                    <p>{{list.title}}</p>
                    <a href="">-</a>
                </li>
            </ul>
        </section>
        <footer>
            Copyright © 2014 todolist.cn <a href="">clear</a>
        </footer>
    </div>

    <script type="text/javascript">
        new Vue({
            el:'#main',
            data:{
                todolist:[//正在进行的事情
                    {isChecked:false,title:'吃饭'},
                    {isChecked:false,title:'睡觉'},
                    {isChecked:false,title:'看书'},
                    {isChecked:false,title:'打豆豆'}
                ],
                donelist:[//已经完成的事情
                    {isChecked:true,title:'吃饭'},
                    {isChecked:true,title:'睡觉'},
                    {isChecked:true,title:'看书'},
                    {isChecked:true,title:'打豆豆'}
                ]
            }
        });
    </script>
</html>
